<template>
	<div id="orgWebsite_index">
		<div class="title">
			<span class="left">网点管理</span>
			<div>
				<el-button class="add" type="primary" size="small" @click="goLink('../page/orgFullScreen')">
					全屏监控
				</el-button>
				<el-button class="add" type="primary" size="small" icon="el-icon-plus" @click="goLink('/orgWebsite/orgWebsiteAdd')">
					添加
				</el-button>
			</div>
		</div>
		<el-table type="index" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;padding: 32px;">
			<el-table-column prop="number" label="序号" align="center" width="100">
				<template slot-scope="scope">
					<span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="latticeName" width="" align="center" label="网点名称"></el-table-column>
			<el-table-column prop="number" width="" align="center" label="业务数量"></el-table-column>
			<el-table-column width="" align="center" label="网点管理员" prop="NAME"></el-table-column>
			<el-table-column prop="creatTime" label="创建时间" align="center" width="240"></el-table-column>
			<el-table-column prop="address" label="操作" align="center" width="280">
				<template slot-scope="scope">
					<img @click="goLink('/orgWebsite/orgWebsiteDetail',scope.row.id)" class="imgGroup" src="../assets/img/yewu_02.png">
					<img @click="goLink('/orgWebsite/orgWebsiteEdit',scope.row.id)" class="imgGroup" src="../assets/img/yewu_01.png">
					<img @click="removeData(scope.row.id)" class="imgGroup" src="../assets/img/yewu_03.png">
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pagesize"
			 :page-sizes="[1, 2, 3, 4]" layout="prev, pager, next" :total="tableData.length">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import {orgWebsite,orgWebsiteDel} from '../api/getData'
	export default {
		name: "orgWebsite_index",
		data: function() {
			return {
				tableData: [],
				currentPage: 1,
				pagesize: 10,
			};
		},
		created() {
			// this.getAllList()
		}, // 创建时
		beforeMount: function() {}, // 挂载之前
		mounted: function() {}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		beforeRouteEnter(to, from, next) {
			next(vm => {
				console.log(vm)
				// 每次进入路由执行
				vm.getAllList()
			})
		},
		methods: {
			goLink(url, id) {
				this.$router.push({
					path: url,
					query: {
						id: id
					}
				});
			},
			// 获取所有设备信息
			getAllList() {
				orgWebsite({}).then((res) => {
					console.log(res.data, "获取所有网点信息")
					if (res.data.code == 0) {
						this.tableData = res.data.data
					} else {
						this.tableData = []
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			// 删除设备
			removeData(id) {
				this.$confirm('请再次确认是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消'
				}).then(() => {
					orgWebsiteDel({
						latticeid: id
					}).then((res) => {
						if (res.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getAllList()
						}
					}).catch((error) => {
						console.log(error)
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})
			},
			// 分页
			handleSizeChange(size) {
				console.log(this.pagesize)
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			}
		} // 函数
	};
</script>
<style lang='scss'>
	#orgWebsite_index {
		.title {
			width: 100%;
			height: 56px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			margin-bottom: 24px;
			padding: 0 20px;
			.left {
				font-size: 16px;
				color: #333437;
				font-weight: bold;
			}
			.add {
				color: #fff;
			}
		}

		.btnSearch {
			background: #fff;
			padding-top: 24px;
			overflow: hidden;
			.canInput {
				width: 400px;
				float: right;
				margin-right: 16px;
			}
			.searchs {
				width: 65px;
				margin-right: 48px;
				float: right;
			}
		}
		.el-table thead tr th {
			background-color: #fafafa;
			color: #333;
		}
		.el-table::before {
			height: 0;
		}
		.imgGroup {
			cursor: pointer;
			margin: 0 10px;
		}
		.pagination {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 32px 0;
			background-color: #fff;

			.el-pagination.is-background .btn-next,
			.el-pagination.is-background .btn-prev,
			.el-pagination.is-background .el-pager li {
				background-color: #fff;
				border: 1px solid #ccc;
			}

			.el-pagination.is-background .el-pager li:not(.disabled).active {
				background-color: #409eff;
			}
		}
	}
</style>
